<template>
    <div class="category-container">
      <!--搜索-->
      <div class="search-box">
        <van-search v-model="searchVal" placeholder="请输入搜索关键字" disabled @click="$router.push('/searchPopup').catch(err => {})" />
      </div>
      <!--搜索弹出-->
      <transition name="van-slide-right">
        <router-view></router-view>
      </transition>
      <!--分类-->
      <div class="category-box">
        <!--左侧-->
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="item in categoryList" :key="item.id" :title="item.name" @click="clickTabs(item.id)" />
        </van-sidebar>
        <!--右侧内容-->
        <div class="category-main">
          <!--图片-->
          <div class="banner">
            <van-image fit="cover" :src="currentCategory.banner_url" />
            <h2 class="h2">{{currentCategory.front_name}}</h2>
          </div>
          <!--标题-->
          <div class="category-tit">{{currentCategory.name}}</div>
          <!--列表-->
          <div class="category-list">
            <van-grid :column-num="3">
              <van-grid-item v-for="item in currentCategory.subCategoryList" :key="item.id" @click="toProductsDetail(item.id)">
                <van-image fit="cover" :src="item.banner_url" />
                <span class="text">{{item.name}}</span>
                </van-grid-item>
              </van-grid>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { PostCategoryIndexData, GetCategoryCurrentData } from '@/request/api'
  export default {
    name: 'Category',
    data () {
      return {
        searchVal: '', // 搜索框内容
        categoryList: [], // 分类左侧内容
        activeKey: 0, // 当前导航项的索引
        currentCategory: [] // 右侧内容
      }
    },
    created () {
      PostCategoryIndexData().then(res => {
        // 请求成功
        // console.log(res)
        // 左侧内容
        this.categoryList = res.data.categoryList
        // 右侧内容
        this.currentCategory = res.data.currentCategory
      })
    },
    methods: {
      // 点击重新发送请求
      clickTabs (id) {
        // 传入ID，请求当前索引
        GetCategoryCurrentData({
          id: id
        }).then(res => {
          // 请求成功
          // console.log(res)
          // 重新赋值右边内容
          this.currentCategory = res.data.currentCategory
        })
      },
      // 产品列表页跳转
      toProductsDetail (id) {
        this.$router.push('/list?id=' + id)
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .category-container{
    padding-top: 54px;
  }
  .search-box{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .slide-enter,.slide-leave-to{
    // 过渡开始之前的样式写在这里
    right: -100%;
  }
  .slide-enter-active,.slide-leave-active{
    // 过渡属性写在这里
    transition: right .3s;
  }
  .slide-enter-to,.slide-leave{
    // 过渡结束之后的样式写在这里
    right: 0;
  }
  .category-box{
    width: 100%;
    height: calc(100vh - 54px - 50px);
    display: flex;
    .van-sidebar{
      width: 75px;
      background-color: #f7f8fa;
    }
    .category-main{
      width: 300px;
      overflow-y: auto;
      .banner{
        margin: 0 10px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        .van-image{
          width: 100%;
          height: 140px;
          display: block;
        }
        .h2{
          width: 90%;
          text-align: center;
          font-size: 16px;
          color: #fff;
          text-shadow: 2px 0px 6px #8b0000;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 5;
        }
      }
      .category-tit{
        font-size: 18px;
        color: #333;
        text-align: center;
        padding: 20px 0;
      }
      .category-tit::before{
        content: '';
        width: 30px;
        height: 1px;
        background-color: #ddd;
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
      }
      .category-tit::after{
        content: '';
        width: 30px;
        height: 1px;
        background-color: #ddd;
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
      }
      .category-list{
        .van-image{
          width: 30px;
          height: 30px;
          display: block;
        }
        .text{
          font-size: 14px;
          color: #333;
          margin-top: 5px;
        }
      }
    }
  }
  </style>
  